    <!-- ***** Header Area Start ***** -->
    <header class="header_area" id="header">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="col-12 h-100">
                    <nav class="h-100 navbar navbar-expand-lg align-items-center">
                        <a class="navbar-brand" href="/index.html"></a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#fancyNav"
                            aria-controls="fancyNav" aria-expanded="false" aria-label="Toggle navigation"><span
                                class="ti-menu"></span></button>
                        <div class="collapse navbar-collapse" id="fancyNav">
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="/index.html">主页<span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item active">
                                    <a class="nav-link" href="/document/document.html">文档<span
                                            class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">功能入口</a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="/index2.html">进入应用</a>
                                        <a class="dropdown-item" href="/static-page.html">模板1</a>
                                        <a class="dropdown-item" href="/index3.html">模板2</a>
                                    </div>
                                </li>
                                <!--
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Work</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="static-page.html">Blog</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Shop</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="contact.html">Contact</a>
                                </li>
                                -->
                            </ul>
                            <!-- User & Setting Btn Area -->
                            <div class="fancy-user-and-setting-area">
                                <a id="user-btn" href="javascript:void(0);"><i class="ti-user"
                                        aria-hidden="true"></i></a>
                                <a id="setting-btn" href="javascript:void(0);"><i class="ti-settings"
                                        aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <!-- ***** Header Area End ***** -->